/**
 * @file
 * Stylesheet for the administration pages of the Color module.
 */
.color-form {
  max-width: 50em;
}
.farbtastic {
  margin: 0 auto;
}
.color-form .form-item {
  overflow: hidden;
  margin: 0.5em 0;
}
.color-form label {
  clear: left; /* LTR */
}
[dir="rtl"] .color-form label {
  clear: right;
}
.color-form .form-text {
  float: left; /* LTR */
  width: 86%;
  text-align: center;
  cursor: pointer;
}
[dir="rtl"] .color-form .form-text {
  float: right;
}
#palette .hook {
  float: left; /* LTR */
  width: 16px;
  height: 16px;
}
[dir="rtl"] #palette .hook {
  float: right;
}
#palette .down,
#palette .up,
#palette .both {
  background: url(../images/hook.png) no-repeat 100% 0; /* LTR */
}
[dir="rtl"] #palette .down,
[dir="rtl"] #palette .up,
[dir="rtl"] #palette .both {
  background: url(../images/hook-rtl.png) no-repeat 0 0;
}
#palette .up {
  background-position: 100% -27px; /* LTR */
}
[dir="rtl"] #palette .up {
  background-position: 0 -27px;
}
#palette .both {
  background-position: 100% -54px; /* LTR */
}
[dir="rtl"] #palette .both {
  background-position: 0 -54px;
}
#palette .lock {
  float: left; /* LTR */
  width: 20px;
  height: 19px;
  background: url(../images/lock.png) no-repeat 50% 0;
  cursor: pointer;
}
[dir="rtl"] #palette .lock {
  float: right;
}
#palette .unlocked {
  background-position: 50% -22px;
}

/* wide viewport. */
@media screen and (min-width: 37.5625em) { /* 601px */
  #placeholder {
    float: right; /* LTR */
  }
  [dir="rtl"] #placeholder {
    float: left;
  }
  .color-form .form-item {
    margin: 0.5em 195px 0.5em 0; /* LTR */
  }
  [dir="rtl"] .color-form .form-item {
    margin: 0.5em 0 0.5em 195px;
  }
  .color-form label {
    float: left; /* LTR */
    clear: left; /* LTR */
    width: 15em;
  }
  [dir="rtl"] .color-form label {
    float: right;
    clear: right;
  }
  .color-form .form-text,
  .color-form .form-select {
    float: left; /* LTR */
    width: auto;
  }
  [dir="rtl"] .color-form .form-text,
  [dir="rtl"] .color-form .form-select {
    float: right;
  }
  #palette .hook {
    float: left; /* LTR */
    margin-top: 3px;
  }
  [dir="rtl"] #palette .hook {
    float: right;
  }
  #palette .lock {
    float: left; /* LTR */
  }
  [dir="rtl"] #palette .lock {
    float: right;
  }
}
.item-selected {
  background: #eee;
}

/* Preview */
#preview {
  display: none;
}
.js #preview {
  display: block;
  position: relative;
  float: left; /* LTR */
}
.js[dir="rtl"] #preview {
  float: right;
}
@media screen and (max-width: 30em) { /* 480px */
  .color-form #preview-sidebar,
  .color-form #preview-content {
    width: auto;
    margin: 0;
  }
}
